<template>
	<div class="login" >
		<div class="dh" :class="{ 'default' :icon}">
			<p>输入框不可为空喔</p>
		</div>
		<div class="head">
			<img src="../../../public/images/d1_1.png" >
			<p>手机号注册/登录</p>
		</div>
		<div class="tabs">
			<p>
				<input type="text" placeholder="请输入手机号" v-model.trim.lazy="uname" />
			</p>
			<p>
				<input type="text" placeholder="请输入123的验证码" v-model.trim.lazy="unum" />
				<button >获取验证码</button>
			</p>
		</div>
		<div class="xbox" :class="{ 'defaulttwo' :icon2}">
			<!-- :class="{ 'fugai' : this.uname!='' }" -->
			<span @click="btn()">一键注册/登录</span>
		</div>
		<div class="xbox2">
			<span>非大陆手机号登录</span>
			<span>账号密码登录</span>
		</div>
		<div class="xbox3">
			<img src="../../../public/images/d1_2.png" >
			<img src="../../../public/images/d1_3.png" >
		</div>
		<div class="foot">
			<div class="anniu">
				<template v-if="bol" >
					<img src="../../../public/images/d1_5.png" @click="get()" >
				</template>
				<template v-if="!bol" >
					<img src="../../../public/images/d1_4.png" @click="get()">
					
				</template>
			</div>
			<p>未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意<span>《服务协议》</span>和<span>《隐私政策》</span></p>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	export default{
		name:'Login',
		data(){
			return {
				bol : true,
				uname:'',
				unum:'',
				icon:true,
				icon2:false
			}
		},
		methods:{
			btn(){
				// 手机号码格式
		    let sj = /^[1][3,4,5,7,8][0-9]{9}$/;
			console.log(sj);
			if(this.uname!='' && this.unmu!=''){
				if(sj.test( this.uname ) && this.unum==123 ){
					if(!this.bol){
						Cookies.set('uname',this.uname);
						this.$router.push('/order')
					}else{
						return false;
					}
					
				}
			}else{
				this.icon = !this.icon
				return false;
			}
				
			},
			get(){
			 this.bol = !this.bol;
			 if(this.bol){
			 	this.icon2=false
			 }else{
			 	this.icon2=true
			 }
			}
		},
	}
</script>

<style scoped>
	* {touch-action: pan-y}
	.defaulttwo{
		background-color: #ffd821 !important;
		color: #000000 !important;
	}
	.default{
		display: none;
	}
	.dh{
		position: absolute;
		top: 40%;
		left: 33%;
		width: 36%;
		line-height: 0.7rem;
		color: #878787;
		border-radius: 0.2rem;
		height: 0.7rem;
		text-align: center;
		font-size: 0.4rem;
		background-color: rgba(0,0,0,0.7);
	}
	.fugai{
		background-color: orange;
		color: white;
	}
	.login{
		width: 100%;
		overflow: hidden;
	}
	.login .head{
		width: 100%;
		height: 2.65rem;
		margin-top: 0.35rem;
		text-align: center;
	}
	.login .head img{
		width: 2.1rem;
		height: 2.1rem;
	}
	.login .head p{
		height: 0.45rem;
		font-size: 0.42rem;
		font-weight: 800;
		color: black;
	}
	.login .tabs{
		width: 100%;
		height: 3.4rem;
		text-align: center;
	}
	.login .tabs p:first-child input{
		font-size: 0.35rem;
		width: 85%;
		height: 1.35rem;
		margin-top: 0.2rem;
		font-weight: 300;
		border: none;
		outline:none		
	}
	.login .tabs p:nth-child(2) input{
		margin-top: 0.2rem;
		font-size: 0.35rem;
		width: 63%;
		height: 1.35rem;
		font-weight: 300;
		border: none;
		outline:none
	}
	.login .tabs p:nth-child(2) button{
		width: 22%;
		height: 1.35rem;
		font-size: 0.37rem;
		color: #f9d328;
		background-color: white;
		border: none;
	}
	.login .xbox{
		width: 85%;
		margin: 0.3rem auto 0;
		height: 1.35rem;
		line-height: 1.35rem;
		font-size: 0.42rem;
		text-align: center;
		border-radius: 0.2rem;
		color: rgba(22,22,22,.2);
		background-color: #fff6cc;
	}
	.login .xbox2{
		width: 78%;
		margin: 0 auto;
		height: 1rem;
		display: flex;
		font-size: 0.35rem;
		color: #cbcccb;
		align-items: center;
		justify-content: space-between;
	}
	.login .xbox3{
		width: 40%;
		height: 3.3rem;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.login .xbox3 img{
		width: 1rem;
		height: 1rem;
		background-size: 100%;
	}
	.login .foot{
		width: 85%;
		margin: 0 auto;
		height: 1rem;
		padding-top: 0.3rem;
	}
	.login .foot .anniu img{
		width: 0.24rem;
		height: 0.24rem;
		border: 1px solid gainsboro;
		border-radius: 50%;
		opacity: 1;
		float: left;
		display: inline-block;
		background-size: 100% 100%;
		
	}
	.login .foot p{
		color: #b0b1af;
		font-size: 0.3rem;
	} 
	.login .foot p span{
		color: black;
	}
</style>
